<template>
    <div class="msite-container">

        <HeaderTop :title="address.name">
            <a class="mui-icon mui-icon-search" slot="left"></a>
        </HeaderTop>

        <div class="swiper-container" v-if="foodstypes.length">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(foodstypes,index) in foodsArr" :key="index">
                    <a href="#" class="link_to_food" v-for="(ddd,index) in foodstypes" :key="index">
                        <div class="foods_container">
                            <img :src="ddd.image_url" alt="">
                        </div>
                        <span>甜品饮品</span>
                    </a>
                </div>
            </div>

            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

        </div>
        <img src="../../images/p.jpg" alt="black" v-else>


        <div class="mui-card">
            <span class="mui-icon mui-icon-bars"></span>
            <div class="mui-card-header">页眉</div>

            <ShopList> </ShopList>

            <div class="mui-card-footer">页脚</div>
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'

    import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
    import Swiper from 'swiper'
    import ShopList from '../../components/ShopList/ShopList.vue'
    import 'swiper/dist/css/swiper.min.css'

    export default {
        name: "MSite",
        mounted(){
            this.$store.dispatch('getFoodstypes') //触发actions调用，写入actions的名字
            this.$store.dispatch('getShops')//不一定在shoplist.vue发请求
            this.$store.dispatch('getShopInfo')
        },
        computed:{
            ...mapState(['address','foodstypes','info']),
            /*
            根据categories 一维数组 生成一个二维数组,小数组中的元素个数最大是8
             */
          foodsArr(){
                const { foodstypes } = this

                //准备空的二维数组
                const arr = []
                //准备一个小数组（最大长度为8）
                let minArr = []
                //遍历categories
                foodstypes.forEach(c=>{
                    //如果当前小数组满了，建立一个新的
                    if (minArr.length===4){
                        minArr = []
                    }
                    //如果minArr是空数组，将小数组保存到大数组中
                    if (minArr.length===0)
                    {
                        arr.push(minArr)
                    }
                    minArr.push(c)
                })
                return arr
            }
        },

        watch:{
            foodstypes() {

                this.$nextTick(() => {   //一更新就马上执行回调
                    new Swiper('.swiper-container', {
                        loop: true,
                        pagination: {
                            el: '.swiper-pagination',
                        },
                    })
                })
            }
            },

        components:{
            HeaderTop,
            ShopList,

        }
    }
</script>

<style scoped lang="scss">
    .msite-container{
        margin-top: 10px;
        height: auto;
        .mui-icon-bars{color: #0062cc}
        .mui-h4, h4{font-size: 13px}

        .swiper-wrapper{display: flex;
         .swiper-slide{width: 100%;display: flex;height: 100px;
             .foods_container{width: 25%}
             img{width:100%}}
        }
        .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom: 3px}
        .swiper-pagination{margin-top: 100px}
    }

</style>